<template>
  <div class="chart-box">
    <el-card class="box-card">
      <div slot="header">
        <h2>各岗位调动一览</h2>
      </div>
      <div class="box-body">
        <el-row class="chart">
          <el-col :span="24">
            <div id="chart" ref="internshipChart"></div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getTransData } from "@/api/stationTran";
export default {
  name: "OperationLog",
  data() {
    return {};
  },
  methods: {
    async getDate() {
      const resultKeys = [];
      const { data, code } = await getTransData();
      if (code === 200) {
        data.forEach((item) => {
          for (let key in item) {
            if (key === "name") {
              resultKeys.push(item[key]);
            }
          }
        });
      }
      return { data, resultKeys };
    },

    async drawChart() {
      const { data, resultKeys } = await this.getDate();
      const myChart = this.$echarts.init(this.$refs.internshipChart);

      const option = {
        // backgroundColor: "#2c343c",

        title: {
          text: "岗位调动人数统计",
          left: "center",
          top: 20,
          textStyle: {
            color: "#ccc",
          },
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: resultKeys,
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },

        // visualMap: {
        //   show: false,
        //   min: 80,
        //   max: 600,
        //   inRange: {
        //     colorLightness: [0, 1],
        //   },
        // },
        series: [
          {
            name: "人数",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: data.sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              //   color: "rgba(255, 255, 255, 0.3
              color: "#000",
            },
            labelLine: {
              lineStyle: {
                color: "#000",
              },
              smooth: 0.2,
              length: 20,
              length2: 40,
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function () {
              return Math.random() * 200;
            },
          },
        ],
      };

      myChart.clear();
      myChart.setOption(option);
    },
  },
  mounted() {
    this.drawChart();
  },
};
</script>

<style scoped lang="scss">
.chart-box {
  height: 100%;
}
.box-card {
  height: 100%;
}
.box-body {
  height: 100% !important;
}
.chart {
  height: 100%;
}
/deep/ .el-card__body {
  height: 100% !important;
}
.box-body {
  height: 100%;
}
.el-col {
  height: 100%;
}
#chart {
  height: 100%;
  width: 100%;
}
</style>